import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Row, Table, Button, Divider, Popconfirm, Col } from 'antd';
import { formatMessage, FormattedMessage } from 'umi/locale';
import AddProductPropForm from './components/add';
import EditProductPropForm from './components/edit';

@connect(({ product, loading }) => ({
  product,
  loading: loading.models.product,
}))
class ProductProp extends PureComponent {
  state = {
    modalVisible: false,
    editModalVisible: false,
  };

  componentDidMount() {
    const { dispatch, params } = this.props;

    dispatch({
      type: 'product/fetchStandardProp',
      payload: params.id,
    });

    dispatch({
      type: 'product/fetchCustomProp',
      payload: { productId: params.id },
    });

    dispatch({
      type: 'product/fetchUnit',
    });
    dispatch({
      type: 'product/fetchDataType',
    });
  }

  standardColumns = [
    {
      key: 'name',
      title: formatMessage({ id: 'app.dm.product.prop.table.name' }),
      dataIndex: 'name',
      width: 100,
    },
    {
      key: 'label',
      title: formatMessage({ id: 'app.dm.product.prop.table.label' }),
      dataIndex: 'label',
      width: 150,
    },
    {
      key: 'dataTypeName',
      title: formatMessage({ id: 'app.dm.product.prop.table.dataType' }),
      dataIndex: 'dataTypeName',
      width: 100,
    },
    {
      key: 'range',
      title: formatMessage({ id: 'app.dm.product.prop.table.range' }),
      dataIndex: 'range',
      width: 100,
    },
    {
      key: 'unitName',
      title: formatMessage({ id: 'app.dm.product.prop.table.unit' }),
      dataIndex: 'unitName',
      width: 120,
    },
    {
      key: 'desc',
      title: formatMessage({ id: 'app.dm.product.prop.table.desc' }),
      dataIndex: 'desc',
      width: 150,
    },
    {
      key: 'action',
      title: formatMessage({ id: 'app.dm.product.prop.table.action' }),
      width: 80,
      render: record => (
        <Fragment>
          <a onClick={() => this.editView(record.id)}>
            <FormattedMessage id="app.dm.product.prop.table.action.edit" />
          </a>
        </Fragment>
      ),
    },
  ];

  customColumns = [
    {
      key: 'name',
      title: formatMessage({ id: 'app.dm.product.prop.table.name' }),
      dataIndex: 'name',
      width: 100,
    },
    {
      key: 'label',
      title: formatMessage({ id: 'app.dm.product.prop.table.label' }),
      dataIndex: 'label',
      width: 150,
    },
    {
      key: 'dataTypeName',
      title: formatMessage({ id: 'app.dm.product.prop.table.dataType' }),
      dataIndex: 'dataTypeName',
      width: 100,
    },
    {
      key: 'range',
      title: formatMessage({ id: 'app.dm.product.prop.table.range' }),
      dataIndex: 'range',
      width: 100,
    },
    {
      key: 'unitName',
      title: formatMessage({ id: 'app.dm.product.prop.table.unit' }),
      dataIndex: 'unitName',
      width: 120,
    },
    {
      key: 'desc',
      title: formatMessage({ id: 'app.dm.product.prop.table.desc' }),
      dataIndex: 'desc',
      width: 150,
    },
    {
      key: 'action',
      title: formatMessage({ id: 'app.dm.product.prop.table.action' }),
      width: 80,
      render: record => (
        <Fragment>
          <a onClick={() => this.editView(record.id)}>
            <FormattedMessage id="app.dm.product.prop.table.action.edit" />
          </a>
          <Divider type="vertical" />
          <Popconfirm
            title={
              <div style={{ width: 280 }}>
                <div style={{ fontWeight: 'bold', color: '000', marginBottom: 10 }}>
                  <span>
                    {formatMessage(
                      { id: 'app.dm.product.prop.del.confirm' },
                      { name: record.name },
                    )}
                  </span>
                </div>
              </div>
            }
            onConfirm={() => this.handleDelete(record.id)}
          >
            <a>
              <FormattedMessage id="app.dm.product.prop.table.action.del" />
            </a>
          </Popconfirm>
        </Fragment>
      ),
    },
  ];

  handleDelete = id => {
    const { dispatch, params } = this.props;
    dispatch({
      type: 'product/delProp',
      payload: id,
      params,
    });
  };

  editView = id => {
    const { dispatch } = this.props;
    const { handleEditModalVisible } = this;
    dispatch({
      type: 'product/fetchProp',
      payload: id,
      handleEditModalVisible,
    });
  };

  handleEditModalVisible = flag => {
    this.setState({
      editModalVisible: !!flag,
    });
  };

  handleModalVisible = flag => {
    this.setState({
      modalVisible: !!flag,
    });
  };

  handleAdd = (fieldsValue, form) => {
    const { dispatch, params } = this.props;
    const { handleModalVisible } = this;
    dispatch({
      type: 'product/addProp',
      payload: {
        productId: params.id,
        name: fieldsValue.name,
        label: fieldsValue.label,
        dataTypeId: fieldsValue.dataTypeId,
        unitId: fieldsValue.unitId,
        range: fieldsValue.range,
        desc: fieldsValue.desc,
      },
      form,
      handleModalVisible,
    });
  };

  handleEdit = (fieldsValue, form) => {
    const { dispatch } = this.props;
    const { handleEditModalVisible } = this;
    dispatch({
      type: 'product/editProp',
      payload: {
        id: fieldsValue.id,
        modelId: fieldsValue.modelId,
        productId: fieldsValue.productId,
        name: fieldsValue.name,
        label: fieldsValue.label,
        dataTypeId: fieldsValue.dataTypeId,
        unitId: fieldsValue.unitId,
        range: fieldsValue.range,
        desc: fieldsValue.desc,
      },
      form,
      handleEditModalVisible,
    });
  };

  render() {
    const { modalVisible, editModalVisible } = this.state;
    const {
      product: {
        standardPropList,
        customPropList,
        unitList,
        dataTypeList,
        pagination,
        functionDetail,
      },
      loading,
      params,
      dispatch,
    } = this.props;

    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      ...pagination,
      onShowSizeChange(curr, size) {
        dispatch({
          type: 'product/fetchCustomProp',
          payload: { productId: params.id, ...{ pageNum: curr, pageSize: size } },
        });
      },
      onChange(curr) {
        dispatch({
          type: 'product/fetchCustomProp',
          payload: {
            productId: params.id,
            ...{ pageNum: curr, pageSize: pagination.currentSize },
          },
        });
      },
    };

    const AddModalProps = {
      handleModalVisible: this.handleModalVisible,
      handleAdd: this.handleAdd,
      units: unitList,
      dataTypes: dataTypeList,
    };
    const editModalProps = {
      handleModalVisible: this.handleEditModalVisible,
      handleEdit: this.handleEdit,
      units: unitList,
      dataTypes: dataTypeList,
      detail: functionDetail,
    };

    return (
      <Fragment>
        <Row>
          <span style={{ fontWeight: 'bold', fontSize: 20 }}>
            <FormattedMessage id="app.dm.product.prop.standardprop" />
          </span>
        </Row>
        <Row>
          <Table
            columns={this.standardColumns}
            dataSource={standardPropList}
            loading={loading}
            rowKey="id"
            pagination={false}
            style={{ marginTop: 15 }}
          />
        </Row>
        <Row style={{ marginTop: 15 }}>
          <Col span={12}>
            <span style={{ fontWeight: 'bold', fontSize: 20 }}>
              <FormattedMessage id="app.dm.product.prop.customprop" />
            </span>
          </Col>
          <Col span={12} style={{ textAlign: 'right' }}>
            <Button type="primary" onClick={() => this.handleModalVisible(true)}>
              <FormattedMessage id="app.dm.product.prop.add" />
            </Button>
          </Col>
        </Row>
        <Row>
          <Table
            columns={this.customColumns}
            dataSource={customPropList}
            loading={loading}
            pagination={paginationProps}
            rowKey="id"
            style={{ marginTop: 15 }}
          />
        </Row>
        <AddProductPropForm {...AddModalProps} modalVisible={modalVisible} />
        <EditProductPropForm {...editModalProps} modalVisible={editModalVisible} />
      </Fragment>
    );
  }
}

export default ProductProp;
